<template>
<div class="bg">
  <div class="logos">
      <img src="../assets/images/logo.png"/>
  </div>
  <div class="login">
    <div class="titles"><span>登录账号</span></div>
    <input placeholder="请输入手机号或邮箱" autocomplete="off" v-model="phone"/>
    <input placeholder="请输入密码" autocomplete="off" v-model="password" type="password"/>
    <div class="remember">
      <input class="ipt" type="checkbox" @click="confirm" />
      <span class="mima" >记住密码</span>
      <span class="fogter" @click="$router.push('/forgetPassword')">忘记密码？</span>
    </div>
    <button  class="btn1" type="submit" :disabled="!phone || !password" @click="submitLogin">立即登录</button>
  </div>
</div>
</template>

<script>
import {loginCheck} from '../service/api'
import {mapMutations} from 'vuex'
import {isphone, isEmail} from '../utils/utils'

export default {
  name: 'login',
  data () {
    return {
      phone: '',
      password: ''
    }
  },
  created () {
    if (localStorage.account) this.phone = localStorage.account
    // else if (localStorage.account) this.password = localStorage.account
  },
  methods: {
    ...mapMutations(['RECORD_USERINFO']),
    async submitLogin () {
      if (!isphone(this.phone) && !isEmail(this.phone)) {
        this.$message({
          message: '请输入正确的号码或者邮箱',
          iconClass: 'icon-hide'
        })
        return
      }
      let res = await loginCheck(this.phone, this.password)
      if (res.code === 200) {
        this.RECORD_USERINFO(res.value)
        localStorage.account = this.phone
        console.log('phone', localStorage.account)

        let redirect = decodeURIComponent(this.$route.query.redirect || '/')
        this.$router.push({
          path: redirect
        })
      }
    },
    confirm () {
      if (localStorage) this.password = localStorage.account
      console.log('passwor', this.password)
    }
  }
}
</script>

<style scoped lang="less">
*{
  margin:0;
  padding:0;
}
.bg{
  width:100%;
  height:6rem;;
  position: relative;
  background-image: url('../assets/images/login_bg.png');
  background-repeat: no-repeat;
  background-position: 23% 100%;
  background-size: 30%;
}
.logos{
  width:100%;
  height:1.2rem;
  position: relative;
  top:.5rem;
  img{
    position: absolute;
    left:20%;
  }
}
.login{
  position: relative;
  top:.7rem;
  left:50%;
  width:3.5rem;
  height:3.5rem;
  .titles{
    width:100%;
    height:.55rem;
    position: relative;
    font-size: .29rem;
    color:rgb(107, 36, 102);
    span{
      position: absolute;
      left:.5rem;
      color:rgb(107, 36, 102);
    }
  }
  input:nth-child(2){
    position: relative;
    margin:0 auto;
    font-size: .22rem;
    width:2.6rem;
    height:.55rem;
    display: block;
    outline: 0;
    border-radius: .1rem;
    padding:0 .2rem;
    border:1px solid lightgray;

  }
  input:nth-child(3){
    position: relative;
    font-size: .22rem;
    top:.25rem;
    width:2.6rem;
    margin:0 auto;
    height:.55rem;
    display: block;
    outline: 0;
    padding:0 .2rem;
    border-radius: .1rem;
    border:1px solid lightgray;
  }
  .remember{
    width:3rem;
    height:.55rem;
    position: relative;
    top:.4rem;
    margin:0 auto;
    font-size: .22rem;
    .ipt{
      position: absolute;
      left:0;
      top:.1rem
    }
    .mima{
      position: absolute;
      left:0.2rem;
      color:rgb(110, 118, 154)
    }
    .fogter{
      position: absolute;
      right:0;
      color:rgb(110, 118, 154);
      cursor:pointer;
    }
  }
  .btn1{
    position: relative;
    top:-.2rem;
    width:2.5rem;
    height:.55rem;
    font-size: .25rem;
    border-radius: .2rem;
    outline: 0;
    border:none;
    color:#fff;
    background-color: rgb(107, 36, 102);
    cursor:pointer ;
    &:disabled{ color:#999; background-color:lightgray !important;}
  }

}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
